<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--针对IE的兼容性问题-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对响应式布局之后，针对不同的布局大小自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello boostrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="component/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        .login_box {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login_box">
        <div class="col-md-10 col-md-offset-1">
            <form action="javascript:void (0)" class="form-horizontal" method="post">
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">用户名:</label>
                    <div class="col-md-4"
                         data-toggle="popover" data-trigger="hover"
                         data-content="不能为空" data-placement="right">
                        <input type="text" name="username" class="form-control" placeholder="UserName">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">密码:</label>
                    <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                         data-content="最少输入6个字符" data-placement="right">
                        <input type="password" name="password" class="form-control" placeholder="PassWord">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">确认密码:</label>
                    <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                         data-content="最少输入6个字符" data-placement="right">
                        <input type="password" name="passwordAgain" class="form-control" placeholder="passwordAgain">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">手机号码:</label>
                    <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                         data-content="不能为空" data-placement="right">
                        <input type="text" name="phone" class="form-control" placeholder="Phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">邮箱:</label>
                    <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                         data-content="@" data-placement="right">
                        <input type="email" name="email" class="form-control" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">性别:</label>
                    <div class="col-md-4">
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="0" checked>女
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" value="1">男
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">爱好:</label>
                    <div class="col-md-offset-4 hobbiesBtnBox">
                        <button type="button" class="btn btn-default" style="margin-left: 12px">全选</button>
                        <button type="button" class="btn btn-default">全不选</button>
                        <button type="button" class="btn btn-default">反选</button>
                    </div>
                    <div class="col-md-offset-4 col-md-6 checkbox" id="hobbies_box"
                         data-toggle="popover" data-trigger="hover"
                         data-content="只能选择两个" data-placement="right">
                        <label>
                            <input type="checkbox" name="hobbies">美术
                        </label>
                        <label>
                            <input type="checkbox" name="hobbies">音乐
                        </label>
                        <label>
                            <input type="checkbox" name="hobbies">美食
                        </label>
                        <label>
                            <input type="checkbox" name="hobbies">游戏
                        </label>
                        <label>
                            <input type="checkbox" name="hobbies">视频
                        </label>
                        <label>
                            <input type="checkbox" name="hobbies">满足
                        </label>
                    </div>
                </div>
                <div class="form-group form-inline">
                    <label class="col-md-offset-2 col-md-2 control-label">地址:</label>
                    <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                         data-content="需要选择" data-placement="right">
                        <select name="province" id="province" class="form-control">
                            <option value="-1">-请选择-</option>
                            <option value="1">-江西省-</option>
                            <option value="2">-江苏省-</option>
                            <option value="3">-上海市-</option>
                            <option value="4">-广东省-</option>
                        </select>
                        <select name="city" id="city" class="form-control">
                            <option value="-1">-请选择-</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-offset-2 col-md-2 control-label">描述:</label>
                    <div class="col-md-4" data-toggle="popover" data-trigger="hover"
                         data-content="最多输入50个字符" data-placement="right">
                        <textarea class="form-control" name="personalDescription" id="personalDescription" rows="6"
                                  maxlength="50"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-4 col-md-4">
                        <button type="submit" class="btn btn-success">注册</button>
                        <button type="reset" class="btn btn-default btn-md pull-right">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--导入js文件-->
<script type="text/javascript" src="component/jquery/jquery.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/one.js"></script>
<script>
    // bootstrap从性能的角度考虑，没有吧tooltip和popover等组件自动加载执行，而是由用户自行决定是否启用这个功能
    // 启用的代码如下：
    $(function () {
        $('[data-toggle="popover"]').popover();
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>
</body>
</html>